<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 100px;
			background-image: url("https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg");
			background-size: cover;

		}
		.header{
			height: 110px;
			width: 80%;
			margin: 0 auto;
			padding: 20px 0;
			box-sizing: border-box;
		}
		.nav{
			width: 70px;
			height: 25px;
			background-image: url("https://mdn.alipayobjects.com/huamei_gk2yv1/afts/img/A*D2VVQIehGhwAAAAAAAAAAAAADneBAQ/original");
			float: left;
			background-size: contain;
			background-position: center;
		}
		.clearFix::after{
			content: "";
			clear: both;
			display: table;
		}
		.header img{
			width: 50px;
			height: 25px;
			float: left;
			margin-left: 10px;
		}
		.header-nav{
			float: right;
		}
		.header-nav p{
			color: #777;
			display: inline-block;
		}
		.header-nav a{
			text-decoration: none;
			color: white;
		}
		.content{
			width: 80%;
/*			height: 400px;*/
			margin: 0 auto;
		}
		.content-img{
			width: 600px;
			height: 200px;
			margin: 0 auto;
			margin-top: 50px;
			background-image: url("https://img.alicdn.com/tps/TB1POhqIFXXXXXbXFXXXXXXXXXX.png");
			background-size: 100% 100%;
		}
		.content-text{
			height: 50px;
			margin: 50px auto;
			text-align: center;
			display: flex;
			justify-content: center;
		}
		.content-text a{
			width: 170px;
			height: 50px;
			border-radius: 10px;
			margin-right: 20px;
			text-decoration: none;
			background-color: #30c3ff;
			color: white;
			text-align: center;
			vertical-align: middle;
			line-height: 50px;
		}
		.title-img{
			width: 30px;
			height: 30px;
			background-image: url("https://img.alicdn.com/tps/TB1uh30IpXXXXXKXVXXXXXXXXXX.png");
			background-size: 100%;
/*			background-position: 0 1px;*/
			background-position: center;
			display: inline-block;
			vertical-align: middle;
		}
		.span{
			margin-left: 10px;
			vertical-align: middle;
		}
		.content-text a:nth-of-type(2) .title-img{
			background-image: url("https://zos.alipayobjects.com/rmsportal/neqhNGwxBXBmhVY.png");
		}
		.content-text a:nth-of-type(3) .title-img{
			background-image: url("https://img.alicdn.com/tps/TB12JNkIFXXXXXBXXXXXXXXXXXX.png");
		}
		.content-text a:nth-of-type(4) .title-img{
			background-image: url("https://gw.alipayobjects.com/mdn/rms_cfbd2a/afts/img/A*TQ_dRJ8sBb4AAAAAAAAAAAAAARQnAQ");
		}
		.title{
			height: 50px;
			overflow: hidden;
			transition: all .5s;
		}
		.title:hover{
			height: 100px;
			margin-top: -25px;
		}
		.title:hover div{
			display: none;
		}
		.title:hover span{
			display: none;
		}
		.show{
			display: none;
			text-align: center;
		}
		.show p{
			border-bottom: 1px solid #777;
		}
		.show p:nth-of-type(2){
			border-bottom: 0;
		}
		.title:hover .show{
			display: block;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="header clearFix">
			<div class="nav"></div>
			<img src="https://img.alicdn.com/tfs/TB1DeJxnAY2gK0jSZFgXXc5OFXa-86-64.png">
			<div class="header-nav">
				<p>我已有支付宝账户</p>
				<a href="">快速登录</a>
			</div>
		</div>
		<div class="content">
			<div class="content-img clearFix"></div>
			<div class="content-text clearFix">
				<a href="">
					<div class="title-img"></div>
					<span class="span">我是服务商</span>
				</a>
				<a href="">
					<div class="title-img"></div>
					<span class="span">我是开发者</span>
				</a>
				<a href="" class="title">
					<div class="title-img"></div>
					<span class="span">我是商家用户</span>
					<div class="show">
						<p>我是支付宝商家</p>
						<p>我是口碑商家</p>
					</div>
				</a>
				<a href="">
					<div class="title-img"></div>
					<span class="span">我是机构用户</span>
				</a>
				<a href="">
					<div class="title-img"></div>
					<span class="span">我是个人用户</span>
				</a>
			</div>
		</div>
	</div>
	
</body>
</html>